<template>
    <div class="tip">
        <svg @click="goBack()" t="1743402074255" class="backIcon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="2913" width="20" height="20">
            <path d="M739.555556 198.599111L412.842667 525.312 739.555556 852.024889l-84.821334 84.764444-411.534222-411.477333L654.791111 113.777778z"
                fill="#fff" p-id="2914">
            </path>
        </svg>
        我的点赞
    </div>

    
    <div v-if="newsList!=null && newsList.length!=0" class="category-news-list">
        <div v-for="news in newsList" :key="news.title" class="list-item" @click="navigateToNewsDetails(news)">
            <div class="list-item-content">
                <div class="list-item-title">{{ news.title }}</div>
                <div class="list-item-subtitle">{{ getNewsCategoriesName(news.categoryId) }} · {{ news.publishTime }}</div>
            </div>
            <img v-if="news.frontCover" :src="news.frontCover" width="80" height="60" style="border-radius: 6px; object-fit: cover;">
        </div>
    </div>

    <div v-else style="text-align: center; font-size:16px; margin-top: 20px;">
        ———您还没有点赞过的新闻，快去浏览吧~ ———
    </div>
    


</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router';
import api from '@/api';
import { NewsStore } from '@/stores/newsInfoStore';
import { UserStore } from '@/stores/userInfoStore';

const route = useRoute();
const router = useRouter();
const newsStoreObject = NewsStore();
const userStoreObject = UserStore();

const newsList = ref([])


// 数据定义
const News_queryDTO = ref({
    categoryId: null,
    status: 1,

    current: 1,
    size: 20,
})


// 获取新闻分类名称
const getNewsCategoriesName = (Id) => {
    if (Id != null) {
        return newsStoreObject.newsCategoryInfo.find(ncInfo => ncInfo.id == Id)?.name;
    } else { return null }
};

const navigateToNewsDetails = (news) => {
    router.push({
        path: '/NewsDetails',
        query: {
            NewsId: news.id,
            newsCategoryName: getNewsCategoriesName(news.categoryId)
        }
    });
};

const goBack = () => {
  router.back();
}


onMounted(async() => {
    api.getNewsByUserLike(userStoreObject.userInfo.id, News_queryDTO.value.current, News_queryDTO.value.size).then(res => {
        newsList.value.push(...res.data.data)
    })
})

</script>

<style lang="scss" scoped>
@mixin CommonStyle-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


.tip {
  @include CommonStyle-center;
  top: 0;
  background-color: #409eff;
  color: #fff;
  height: 60px;
  min-height: 60px;
  position: relative;
}
.backIcon {
  position: absolute;
  left: 10px;
}

.category-news-list {
    margin-top: 16px;
}
.list-item {
    display: flex;
    margin-bottom: 16px;
    padding: 10px 30px;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
}
.list-item-content {
    flex: 1;
    margin-right: 16px;
}
.list-item-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 15px;
}

.list-item-subtitle {
    color: #8e8e93;
    font-size: 14px;
}

</style>
